<template>
    <!-- 二维码登入 -->
   <div class="erwei">
    <!-- <h1>微信扫码登入</h1> -->
      <div class="img" >
        <img width="200px"  alt="">
        <i class="mask"></i>
      </div>
     <p>
       <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-shouji-iphone12-zuhe">1212</use>
      </svg>
        <b>扫描二维码</b>
     </p>

    
    </div>
</template>
<script>

//效验验证码
      var validateCaptcha = (rule, value, callback) => {
         if(value.length === 5){
            callback();
          }else{
            callback("请正确输入验证码")
          }
      };
      //效验用户名
      var validateUsername = (rule, value, callback) => {
        // console.log(rule);
        // console.log(value);
        //用户名正则，3到16位（字母数字下划线和减号）
        let uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
        // 如果校验通过要直接回调callback()
        // 如果校验不通过 callback中传参数
        if(uPattern.test(value)){
          callback()
        } else {
          callback('3到16位字母数字下划线和减号')
        }
      };
      //效验密码
      var validatePassword = (rule, value, callback) => {
         // let pwd = value("请出入密码")
         // 密码至少包含 数字和英文，长度3-20
          let pwdPattern = /[0-9A-Za-z]{3,16}$/;
        
          if (pwdPattern.test(value)){
            callback()
          } else {
            callback('密码长度3-20 包含 数字和英文')
          }
      };
export default {
   data() {     
      return {
        ruleForm: {
          username: '',
          password: '',
          captcha: ''
        },
        rules: {
          username: [
            { validator: validateUsername, trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          captcha: [
            { validator: validateCaptcha, trigger: 'blur' }
          ]
        }
      };
    },
}
</script>
<style scoped lang="less">
    /* 修改element-ui的样式
    1.打开调试器，找准类名，覆盖样式
    2.看权重，使用！important
    3.使用深度选择器 >>>  /deep/ */
   .icon-wx {
    width: 25px !important;
    height: 25px !important;
    vertical-align: -7px;
    margin-right: 3px;
}

    .erwei .img {
        display: inline-block;
        position: relative;
        width: 200px;
        height: 200px;

        img {
            position: absolute;
            left: 0;
        }

        .mask {
            width: 100%;
            height: 100%;
            opacity: 0.8;
            background-color: #fff;
            position: absolute;
            left: 0;
            // background-image: url("../../assets/img/scancode.png");
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }
    }
   
</style>